<template>
  <el-main class='main-content'>
    <el-row :gutter="20" type="flex" justify="center">
      <el-col :span="24" class='card-parent'>
        <!-- 博客文章列表 -->
        <el-card v-for="post in articleStore.articleList" :key="post.id"
                 class="card-container" @click="changeArtView(post)">
          <div class='content-container'>
            <!--介绍页-->
            <div class='left-content'>
              <div class='title'>{{ post.title }}</div>
              <div class='description'>{{ post.introduction }}</div>
              <div class='icons'>
                <div>
                  <i class="icon-author"></i>
                  {{post.createBy}}
                </div>
                <div>
                  <i class="icon-click"></i>
                  {{post.clickNum}}
                </div>
                <div>
                  <i class="icon-like"></i>
                  {{post.agreeNum}}
                </div>
              </div>
            </div>
            <!--图片页-->
            <div v-if="post.cover" class="image-wrapper">
              <el-image
                class="article-cover"
                :src="post.cover"
                fit="cover"
                lazy
                :style="{ width: '100%', height: '100%' }"></el-image>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script lang="ts" setup>
  import { onMounted, defineProps } from 'vue'
  import { useArticleStore } from '@/stores/modules/article'

  //=============== 数据 ===============
  const articleStore = useArticleStore()

  //=============== 函数 ===============
  
  //=============== 事件注册/调用 ===============
  defineProps(['changeArtView'])

  //=============== 钩子 ===============
  // 组件挂载更新数据
  onMounted(() => {
    articleStore.refreshArticleList()   
  })


</script>

<style scoped>
.el-main {
  padding: 0px;
  overflow-x: hidden;
}
.el-card ::v-deep .el-card__body {
  flex: 1;
}
:deep(.el-card .el-card__body) {
  padding: 5px;
}

/* 覆盖 Element Plus el-image 的默认样式 */
:deep(.article-cover) {
  width: 100% !important;
  height: 100% !important;
}

:deep(.article-cover .el-image__inner) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 4px !important;
}
</style>

